<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    <!--<div class="container-div">-->
		<!--<div class="col-sm-12 select-table table-striped">-->
			<!--<table id="bootstrap-table" data-mobile-responsive="true"></table>-->
		<!--</div>-->
    <!--</div>-->
	<div class="container-div">

		<!--<div class="row  border-bottom white-bg dashboard-header">-->
		<div class="col-sm-12 select-table table-striped">
			<div class="col-sm-6">
				<div  id="barchart_zhuzhuang" style="width: 100%; height: 400px;"></div>
			</div>
			<div class="col-sm-6">
				<div  id="piechart_zhuzhuang" style="width: 100%; height: 400px;"></div>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
	<!-- 引用echarts -->
	<script th:src="@{/echarts/echarts.min.js}"></script>
	<script th:src="@{/echarts/macarons.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "module/grouptongji";
//        url: prefix + "/list"
		//柱状图
        var barchart_zhuzhuang;
        var piechart_zhuzhuang;
        $(function() {
            //柱状图
            barchart_zhuzhuang = echarts.init(document.getElementById('barchart_zhuzhuang'));
            /*饼图*/
            piechart_zhuzhuang = echarts.init(document.getElementById('piechart_zhuzhuang'));
            $.post(prefix + '/list',function(data){
                var yisname = [];
                var huizhencs = [];
                for(var i in data){
                    if(i){
                        yisname.push(data[i].yisname);
                        huizhencs.push(data[i].huizhencs);
                    }
                }
                var option =getBarOption('会诊医生参会次数统计图', yisname, huizhencs)
                barchart_zhuzhuang.setOption(option);
            });

            $.post(prefix + '/listBar',function(data){
                var allPreData = [];
                var preData = {};
                for(var i in data){
                    if(i){
                        preData['value'] = data[i].zhunshics;
                        preData['name'] = data[i].yisname;
                        allPreData.push(preData);

                    }
                }
                var option =getPieOption('准时医生参会数统计图',allPreData)
                piechart_zhuzhuang.setOption(option);
            });


        });
        /*柱状图*/
      	function getBarOption(title,orgName,sum) {
            option = {
                title : {
                    text:title
                },
                xAxis: {
                    type: 'category',
                    data: orgName
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: sum,
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            // 定制显示（按顺序）
                            color: function(params) {
                                var colorList = ['#d14a61','#00CC00','#3399FF'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }]
            };
            return option;
        }
		/*饼图*/
        function getPieOption(title,data) {
			option = {
				title : {
					text: title
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
				},
				series : [
					{
						name: '访问来源',
						type: 'pie',
						radius : '55%',
						center: ['50%', '60%'],
						data:data,
                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function(params) {
                                    var colorList = ['#d14a61','#00CC00','#3399FF'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
					}
				]
			};
            return option;
        }



	</script>
</body>
</html>